/* #circle {
  border-radius: 50%;
  background: #d6d6d6;
  box-shadow:  9px 9px 18px #ababab,
               -9px -9px 18px #ffffff;
  width: 20%;
  height:auto;
  margin-top: 5%;
  margin-left: 40%;
}

#circle:hover{
  background-color: #232323;
} */
#circle {
  height:auto;
  width: 20%;
  margin-top: 5%;
  margin-left: 40%;
  background: #d6d6d6;
  transition: box-shadow .5s, color .5s, border .5s;
  background-size: 0 0;
  background-position: 50% 50%;
  border-radius: 50%;
  box-shadow: 9px 9px 18px #ababab,
                 -9px -9px 18px #ffffff;
}

#circle:hover {
  box-shadow:  0 0 0 0px;
  border: 1px solid black;
}
.avatar {
    width: 100%;
    height: auto;
}

.name{
  text-align: center;
  font-family:sans-serif;
  font-size: 2vw;
}

body {
  background-color: #d6d6d6;
}

.links{
  padding:1vw;
  margin-left: 20%;
  margin-right: 20%;
  border-radius: 2vw;
  background: #d6d6d6;
  box-shadow:  6px 6px 13px #ababab,
               -6px -6px 13px #ffffff;
  height:9vw;
}



#Logo{
    font-size: 5vw;
    margin-left: 23%;
    margin-top: 5%;
}

#discriptionText{
  font-family: sans-serif;
  text-align: center;
  font-size: 1vw;
  margin-top: -0.0000001vw;
}


.infoBlock{
  border-radius: 2vw;
  width: 15%;
  background: #d6d6d6;
  background-size: 700% 100%;
  box-shadow:  5px 5px 10px #b6b6b6,
             -5px -5px 10px #f6f6f6;
  height:8.5vw;
  text-decoration: none;
  color: black;
  float: left;
  margin-left: 8%;
}

.infoBlock:hover{
  box-shadow:  0 0 0 0px;
  border: 1px solid #e8e6e7;
}


@media (prefers-color-scheme: dark) {
  #circle {
    border-radius: 50%;
    background: #232323;
    box-shadow:  5px 5px 15px #191919,
               -5px -5px 15px #2d2d2d;
    width: 20%;
    height:auto;
    margin-top: 5%;
    margin-left: 40%;
  }
  #circle:hover {
    box-shadow:  0 0 0 0px;
    border: 1px solid white;
  }

  .avatar {
      width: 100%;
      height: auto;
  }

  .name{
    text-align: center;
    font-family:sans-serif;
    font-size: 2vw;
    color: White;
  }

  body {
    background-color: #232323;
  }

  .links{
    padding:1vw;
    margin-left: 20%;
    margin-right: 20%;
    border-radius: 15px;
    background: #232323;
    box-shadow:  5px 5px 15px #191919,
               -5px -5px 15px #2d2d2d;
    height:9vw;
  }



  #Logo{
      font-size: 5vw;
      margin-left: 23%;
      margin-top: 5%;
  }

  #discriptionText{
    font-family: sans-serif;
    text-align: center;
    font-size: 1vw;
    margin-top: -0.0000001vw;
  }


.infoBlock{
    border-radius: 16px;
    width: 15%;
    background: #232323;
    box-shadow:  5px 5px 15px #191919,
               -5px -5px 15px #2d2d2d;
    height:8.5vw;
    text-decoration: none;
    color: White;
    float: left;
    margin-left: 8%;
  }

  .infoBlock:hover{
    box-shadow:  0 0 0 0px;
    border: 1px solid #e8e6e7;
  }
}
